<template>
    <el-container style="height: 100%">
        <el-header style="background-color:coral;">
            <el-row>
                <el-col :span="2">
                    <img src="../assets/image0.png" alt="" width="100%">
                </el-col>
                <el-col :span="2" :offset="20" style="margin-top: 10px;">
                    <!-- 登录 -->
                    <el-button type="warning" @click="quit" plain>退出登录</el-button>
                    <!-- <el-button plain @click="quit">退出登录</el-button> -->
                </el-col>
            </el-row>
        </el-header>
      <el-container>

        <el-aside width="200px" style="background-color: #545c64">
          <!-- 菜单组件
          一级菜单表签 v-for  el-submenu
          二级菜单标签 v-for  el-menu-item
                  -->
          <el-menu default-active="2" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"
            router
          >
            <template v-for="menu in menuList">
              <!-- 有子菜单的用 el-submenu -->
              <el-submenu v-if="menu.childrenMenus && menu.childrenMenus.length" :index="menu.link" :key="menu.menuId">
                <template slot="title">
                  <span>{{ menu.name }}</span>
                </template>
                <el-menu-item v-for="cmenu in menu.childrenMenus" :index="cmenu.link" :key="cmenu.menuId">
                  {{ cmenu.name }}
                </el-menu-item>
              </el-submenu>
               <!-- 没有子菜单的用 el-menu-item -->
              <el-menu-item v-else :index="menu.link" :key="menu.menuId">
                <span>{{ menu.name }}</span>
              </el-menu-item>
            </template>
          </el-menu>
        </el-aside>

        <el-main style="background-color: antiquewhite">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </template>
  
  <script>
  export default {
    data() {
      return {
        menuList: [],
      };
    },
  
    methods: {
      queryUserMenu() {
        //chaxun yognhu caidan qigniqu
        this.$axios.get("api/menu/queryMenu").then((resp) => {
          console.log(resp.data);
          if (resp.data.code == 200) {
            this.menuList = resp.data.data;
          }
          if(resp.data.code == 2002){
            this.$message.error("请先登录");
            this.$router.push("/login");
          }
        });
      },
      quit(){

      },
    },
    created() {
      this.queryUserMenu();
    },
  };
  </script>
  
  <style scoped>
    .el-menu{
        border: 0;
    }
  </style>